import React, { Component } from 'react';
import ReactDOM from 'react-dom/client'
import './index.css'


export default class TabControl extends Component {
    constructor(){
        super()
        this.state={
correntIndex:0
    }
    }
    
  render() {
    //   console.log(this.props.title)
      const{title}=this.props;
      const{correntIndex}=this.state;
    return (
      <div className='tab-control'>
        {title.map((item,index)=><div className={'tab-item ' + (index === correntIndex ? 'active':'')}
    onClick={e=>this.itemClick(index)}  key={item}>
           <span >{item} </span> 
           </div>
        )}
      </div>
    )
  }
  itemClick=(index)=>{
this.setState({correntIndex:index})
const {itemClick}=this.props;
itemClick(index)
  }
}
